<template>
  <el-form label-position="top" class="basic-properties">
    <!-- 元素ID -->
    <el-form-item :label="t('bpmn.elementId')">
      <el-input :model-value="element.id" disabled />
    </el-form-item>

    <!-- 元素名称 -->
    <el-form-item :label="t('bpmn.name')">
      <el-input
          v-model="localProperties.name"
          @input="updateProperties"
          :placeholder="t('bpmn.enterName')"
      />
    </el-form-item>

    <!-- 文档说明 -->
    <el-form-item :label="t('bpmn.documentation')">
      <el-input
          v-model="localProperties.documentation"
          type="textarea"
          rows="3"
          @input="updateProperties"
          :placeholder="t('bpmn.enterDescription')"
      />
    </el-form-item>

    <!-- 应用按钮 -->
    <el-button
        type="primary"
        @click="emitUpdate"
        class="apply-btn"
    >
      {{ t('bpmn.applyChanges') }}
    </el-button>
  </el-form>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const props = defineProps({
  element: Object // 当前选中的BPMN元素
});

const emit = defineEmits(['update']);

// 本地存储的属性副本
const localProperties = ref({
  name: '',
  documentation: ''
});

// 监听元素变化
watch(() => props.element, (newElement) => {
  if (newElement) {
    const businessObject = newElement.businessObject || {};
    localProperties.value = {
      name: newElement.name || '',
      documentation: businessObject.documentation?.[0]?.text || ''
    };
  }
}, { immediate: true });

// 更新属性（实时更新）
function updateProperties() {
  emit('update', {
    ...localProperties.value,
    // 文档需要特殊处理
    businessObject: {
      documentation: [
        {
          $type: 'bpmn:Documentation',
          text: localProperties.value.documentation
        }
      ]
    }
  });
}

// 显式应用修改
function emitUpdate() {
  updateProperties();
}
</script>

<style scoped>
.basic-properties {
  padding: 12px;
}
.apply-btn {
  margin-top: 16px;
  width: 100%;
}
</style>